<template>
  <!--  <div class="q-pa-md q-gutter-sm">-->
  <q-dialog v-model="isShow">
    <q-card>
      <q-card-section class="row items-center q-pb-none">
        <!-- dialog框标题 -->
        <div class="text-h6">{{ title }}</div>
        <q-space />
        <q-btn
          icon="close"
          flat
          round
          dense
          v-close-popup
          @click="closeDialog"
        />
      </q-card-section>

      <q-separator style="margin-top: 12px" />

      <!-- 输入框内容 -->
      <q-card-section style="max-height: 50vh" class="scroll">
        <div
          class="input-label"
          v-for="(field, index) in fields"
          :key="field.key"
        >
          <q-input
            v-if="!field.isHidden && field.type !== 'select'"
            outlined
            v-model="field.value"
            :label="field.name"
            :type="field.type"
            :disable="field.disable"
          />
          <q-select
            v-if="field.type === 'select' && !field.isHidden"
            outlined
            v-model="field.value"
            :options="field.options"
            behavior="menu"
            :label="field.name"
            emit-value
            map-options
          />
          <q-btn
            v-if="field.isDelete"
            @click="deleteClick(index)"
            icon="delete"
            class="text-red-9"
          ></q-btn>
        </div>
      </q-card-section>

      <!--      <q-separator/>-->

      <!-- 按钮插槽，如果没有传入，默认一个确定按钮 -->
      <q-card-actions align="center">
        <slot name="buttons">
          <q-btn
            :label="defaultButtonName"
            color="primary"
            v-close-popup
            @click="confirmClick"
            class="full-width"
          />
        </slot>
      </q-card-actions>
    </q-card>
  </q-dialog>
  <!--  </div>-->
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  dialogShowValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "标题",
  },
  fields: {
    type: Array,
    default: () => [],
  },
  defaultButtonName: {
    type: String,
    default: "确定",
  },
});
const emit = defineEmits(["close", "onConfirm", "deleteField"]);
const isShow = computed(() => props.dialogShowValue);

function closeDialog() {
  emit("close");
}

function confirmClick() {
  emit("onConfirm");
}

function deleteClick(index) {
  emit("deleteField", index);
}
</script>

<style scoped>
.input-label {
  display: flex;
}
.input-label label {
  flex: 1;
}
</style>
